<template>
  <div class="all">
    <header>
      <div class="div" @click="back()">
        <img src="../../assets/返回.png" alt="">
        <span>返回</span>
      </div>
      <div class="div">
      </div>
      <div class="div" @click="clickSend()">
        <span>发布</span>
      </div>
    </header>
    <div class="content">
      <textarea placeholder="说点什么吧~" v-model="value"></textarea>
      <div class="imgList">
        <!--                      preview-size="29vw"-->
        <van-uploader v-model="fileList"
                      :max-count="9"
                      :upload-icon="require('../../assets/上传图片.png')"
                      multiple="true"
                      @delete="Delete"
                      :before-delete="beforeDel"
                      image-fit="cover"
                      accept="image/*"
                      preview-size="21.5vw"
                      :after-read="updateFile"
        />
<!--                              :before-read="beforeRead"
   -->
<!--        v-show="model === 'vue' || fileList.length > 0"-->
<!--        <div class="upload" @click="uploadAndroid()" v-show="model === 'ANDROID'">-->
<!--          <van-icon color="#dcdee0" size="24" style="font-size: 24px" name="plus"></van-icon>-->
<!--        </div>-->
      </div>
    </div>
    <van-dialog v-model="show"
                width="200px"
                confirm-button-color="#1da4f2"
                title="确定发布吗？"
                @confirm="onConfirm()"
                show-cancel-button>
    </van-dialog>
<!--    <div class="loading" v-if="this.">-->
<!--      <van-loading  size="24px" type="spinner" color="#1989fa">加载中...</van-loading>-->
<!--    </div>-->
  </div>
</template>

<script>
import {Toast} from 'vant'
import lrz from 'lrz'
import $ from 'jquery'
export default {
  name: 'SendCircleFriends',
  data () {
    return {
      show: false,
      userid: '',
      value: '',
      isSend: true,
      fileList: [],
      imgList: [],
      uploadFile: [],
      thisWidth: 0,
      model: '',
      uploadNumber: 1
    }
  },
  mounted () {
    this.thisWidth = $(window).width()
    // 截取网址后的userid
    this.userid = this.$utils.getUrlKey('userid')
    // if (sessionStorage.getItem('sys') === 'ANDROID') {
    //   this.model = 'ANDROID'
    //   this.uploadNumber = 1
    // } else {
    //   this.model = 'vue'
    //   this.uploadNumber = 9
    // }
  },
  methods: {
    DelVideo (file, detail) {
      this.fileList = [] // 视频存储
      this.videoList = [] // 视频返回后存储
    },
    // // 返回布尔值
    // beforeRead (file) {
    //   if (file.type !== 'image/jpeg') {
    //     Toast('请上传 jpg 格式图片')
    //     return false
    //   }
    //   return true
    // },
    // 返回
    back () {
      this.$router.history.go(-1)
    },
    // 点击发布
    clickSend () {
      if (this.isSend === true) {
        if (this.value !== '' || this.fileList.length > 0) {
          this.show = true
        } else {
          Toast('请输入点什么才能发布哦')
        }
      } else {
        Toast('图片压缩中，请稍后')
      }
    },
    // 发布确定按钮
    onConfirm () {
      this.faBu()
    },
    faBu () {
      // console.log(this.imgList.toString())
      this.$http.insertCircleAction({
        user_id: this.userid,
        content: this.value,
        tupians: this.imgList.toString()
      })
        .then(res => {
          console.log(res)
          this.$router.history.go(-1)
        })
        .catch(err => {
          console.log(err)
        })
    },
    updateFile (file) {
      this.fileUpload(file, 0)
    },
    // 删除图片
    Delete (file, detail) {
      this.imgList.splice(detail.index, 1)
    },
    beforeDel (detail) {
      if (this.isSend === true) {
        return true
      } else {
        Toast('请压缩完之后再进行操作')
        return false
      }
    },
    // 上传图片请求操作
    fileUpload (file, i) {
      if (file.length === undefined) {
        this.isSend = false
        file.status = 'uploading'
        file.message = '正在压缩中...'
        if (file.file !== undefined) {
          lrz(file.file, {
            width: 2000,
            quality: 0.7 // 图片压缩质量，取值0-1，默认为0.7
          })
            .then((rst) => {
              this.$http.fileUpload({base64: rst.base64})
                .then(res => {
                  console.log(res)
                  if (res.data.status === 'success') {
                    // this.imgList.push(res.data.data[0] + '|' + res.data.data[1])
                    this.imgList.push(res.data.data[0].img + '|' + res.data.data[0].img_yasuo)
                    // var obj = {
                    //   url: res.data.data[1],
                    //   isImage: true
                    // }
                    // if (this.fileList.length > 3) {
                    // } else {
                    //   this.fileList.push(obj)
                    // }
                    this.isSend = true
                    file.status = ''
                    file.message = ''
                  }
                })
                .catch(err => {
                  console.log(err)
                })
            })
            .catch((error) => {
              console.log('失败', error)
              // this.fileUpload(file[i].content, file, i)
              // 失败时执行
            })
        } else {
          lrz(file, {
            width: 2000,
            quality: 0.7 // 图片压缩质量，取值0-1，默认为0.7
          })
            .then((rst) => {
              this.$http.fileUpload({base64: rst.base64})
                .then(res => {
                  console.log(res)
                  if (res.data.status === 'success') {
                    // this.imgList.push(res.data.data[0] + '|' + res.data.data[1])
                    this.imgList.push(res.data.data[0].img + '|' + res.data.data[0].img_yasuo)
                    // var obj = {
                    //   url: res.data.data[1],
                    //   isImage: true
                    // }
                    // if (this.fileList.length > 3) {
                    // } else {
                    //   this.fileList.push(obj)
                    // }
                    this.isSend = true
                    file.status = ''
                    file.message = ''
                  }
                })
                .catch(err => {
                  console.log(err)
                })
            })
            .catch((error) => {
              console.log('失败', error)
              // this.fileUpload(file[i].content, file, i)
              // 失败时执行
            })
        }
      } else {
        if (i === file.length) { //  || this.fileList.length > 8
          this.isSend = true
          return false
        }
        this.isSend = false
        if (i === 0) {
          for (var j = 0; j < file.length; j++) {
            file[j].status = 'uploading'
            file[j].message = '正在压缩中...'
          }
        }
        lrz(file[i].file, {
          width: 2000,
          quality: 0.7 // 图片压缩质量，取值0-1，默认为0.7
        })
          .then((rst) => {
            this.$http.fileUpload({base64: rst.base64})
              .then(res => {
                console.log(res)
                if (res.data.status === 'success') {
                  // this.imgList.push(res.data.data[0] + '|' + res.data.data[1])
                  this.imgList.push(res.data.data[0].img + '|' + res.data.data[0].img_yasuo)
                  file[i].status = ''
                  file[i].message = ''
                  i++
                  this.fileUpload(file, i)
                }
              })
              .catch(err => {
                console.log(err)
              })
          })
          .catch((error) => {
            console.log('失败', error)
          })
      }
    }
  }
}
</script>

<style scoped>
  .all{
    width: 100%;
    height: 100%;
    background: #FAF9FE;
  }
  header{
    width: 100%;
    height: 12vw;
    display: flex;
    align-items: center;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #1DA4F2;
    background: #FFFFFF;
    position: sticky;
    top: 0;
  }

  header div{
    width: 33%;
    display: flex;
    align-items: center;
  }
  header div:nth-child(1) img{
    width: 7px;
    height: 13px;
    margin: 0 5px 0 15px;
  }
  header div:nth-child(2){
    justify-content: center;
    color: #333;
  }
  header div:nth-child(3) img{
    width: 15px;
    height: 15px;
    margin-right: 5px;
  }
  header div:nth-child(3){
    justify-content: flex-end;
    margin-right: 15px;
  }
  .content{
    width: 100%;
    display: flex;
    flex-direction: column;
    /*justify-content: center;*/
    align-items: center;
    background: #FFFFFF;
  }
  .content textarea{
    width: 92%;
    height: 150px;
    resize: none;
    border: none;

    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
  }
  .imgList{
    width: 92%;
    height: auto;
    display: flex;
    align-items: center;
    flex-direction: row;
    /*justify-content: space-around;*/
  }
  .upload {
    width: 21.5vw;
    height: 21.5vw;
    background-color: #f7f8fa;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  /deep/ .van-uploader__preview, /deep/ .van-uploader__upload{
    margin: 2px;
  }
  /deep/ .van-uploader__input{
    border: 1px solid #E5E5E5;
  }
</style>
